<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>板块数据列表</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f8f9fa;
        }
        .container {
            margin-top: 20px;
        }
        .header {
            background-color: #007bff;
            color: white;
            padding: 15px;
            border-radius: 5px 5px 0 0;
            margin-bottom: 0;
        }
        .table-responsive {
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            background-color: white;
            border-radius: 0 0 5px 5px;
        }
        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
        }
        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }
        .success {
            color: #28a745;
        }
        .danger {
            color: #dc3545;
        }
        .update-time {
            font-size: 12px;
            color: #6c757d;
        }
        .card {
            margin-bottom: 20px;
        }
        .loading {
            text-align: center;
            padding: 40px;
            color: #6c757d;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="header">
                <div class="row">
                    <div class="col-md-8">
                        <h3 class="mb-0">板块数据列表</h3>
                    </div>
                    <div class="col-md-4 text-right">
                        <button id="fetchDataBtn" class="btn btn-primary btn-sm">
                            <i class="fas fa-sync-alt"></i> 手动抓取数据
                        </button>
                        <a href="/block/statistics" class="btn btn-outline-light btn-sm ml-2">
                            <i class="fas fa-chart-bar"></i> 数据统计
                        </a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="thead-light">
                            <tr>
                                <th>序号</th>
                                <th>板块代码</th>
                                <th>板块名称</th>
                                <th>市场码</th>
                                <th>成交量(股)</th>
                                <th>成交额(元)</th>
                                <th>涨跌幅(%)</th>
                                <th>数据来源</th>
                                <th>更新时间</th>
                                <th>状态</th>
                            </tr>
                        </thead>
                        <tbody id="blockTableBody">
                            <tr>
                                <td colspan="10" class="loading">
                                    <div class="spinner-border" role="status">
                                        <span class="sr-only">加载中...</span>
                                    </div>
                                    <span class="ml-2">正在加载数据...</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // 加载数据
            loadBlockData();
            
            // 手动抓取数据按钮点击事件
            $('#fetchDataBtn').click(function() {
                $(this).prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> 抓取中...');
                
                $.ajax({
                    url: '/block/fetchData',
                    type: 'GET',
                    dataType: 'json',
                    success: function(result) {
                        $('#fetchDataBtn').prop('disabled', false).html('<i class="fas fa-sync-alt"></i> 手动抓取数据');
                        
                        if (result.success) {
                            alert(result.message);
                            // 重新加载数据
                            loadBlockData();
                        } else {
                            alert('错误：' + result.message);
                        }
                    },
                    error: function() {
                        $('#fetchDataBtn').prop('disabled', false).html('<i class="fas fa-sync-alt"></i> 手动抓取数据');
                        alert('抓取数据失败，请稍后重试');
                    }
                });
            });
        });
        
        // 加载板块数据
        function loadBlockData() {
            $.ajax({
                url: '/block/dataList',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    updateBlockTable(data);
                },
                error: function() {
                    $('#blockTableBody').html('<tr><td colspan="10" class="text-center text-danger">加载数据失败，请刷新页面重试</td></tr>');
                }
            });
        }
        
        // 更新表格数据
        function updateBlockTable(data) {
            var tbody = $('#blockTableBody');
            tbody.empty();
            
            if (data && data.length > 0) {
                $.each(data, function(index, block) {
                    var percentClass = block.changePercent >= 0 ? 'success' : 'danger';
                    var percentSign = block.changePercent >= 0 ? '+' : '';
                    var validClass = block.valid ? 'text-success' : 'text-secondary';
                    var validText = block.valid ? '有效' : '无效';
                    
                    // 格式化更新时间
                    var updateTime = formatDate(block.updateTime);
                    
                    var row = '<tr>' +
                        '<td>' + (index + 1) + '</td>' +
                        '<td>' + block.code + '</td>' +
                        '<td>' + block.name + '</td>' +
                        '<td>' + block.marketCode + '</td>' +
                        '<td>' + formatNumber(block.volume) + '</td>' +
                        '<td>' + formatNumber(block.amount) + '</td>' +
                        '<td class="' + percentClass + '">' + percentSign + block.changePercent + '%</td>' +
                        '<td>' + block.dataSource + '</td>' +
                        '<td class="update-time">' + updateTime + '</td>' +
                        '<td class="' + validClass + '">' + validText + '</td>' +
                        '</tr>';
                    tbody.append(row);
                });
            } else {
                tbody.html('<tr><td colspan="10" class="text-center">暂无数据</td></tr>');
            }
        }
        
        // 格式化数字，添加千分位分隔符
        function formatNumber(num) {
            if (num == null || num === '') return '';
            return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
        
        // 格式化日期
        function formatDate(dateStr) {
            if (!dateStr) return '';
            var date = new Date(dateStr);
            return date.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit'
            });
        }
    </script>
</body>
</html>